<template>
  <div class="dicom-viewer">
    <!-- 修改主内容区域 -->
    <!-- 修改影像显示区域 -->
    <div class="viewer-section">
      <div class="image-display" :class="getSplitContainerClass()">
        <!-- 单屏视图 -->
        <div
            v-if="currentSplitCount === 1"
            ref="dicomViewer"
            class="dicom-canvas"
            :class="getSplitItemClass()"
            @wheel="handleWheel"
        >
          <!-- 图像信息显示在四个角 -->
          <div v-if="currentImage" class="image-info top-left">
            <div class="info-item">姓名: {{ patientInfo.name }}</div>
            <div class="info-item">性别: {{ patientInfo.gender }}</div>
            <div class="info-item">年龄: {{ patientInfo.age }}</div>
            <div class="info-item">检查日期: {{ patientInfo.studyDate }}</div>
          </div>
          <div class="image-info top-right">
            <div class="info-item">{{ currentImage.name }}</div>
            <div class="info-item">{{currentImageIndex+1}}/{{dicomImages.length}}</div>
          </div>
          <div class="image-info bottom-left">
            {{ getViewportInfo(currentImageIndex).imageWidth }}x{{ getViewportInfo(currentImageIndex).imageHeight }}
          </div>
          <div class="image-info bottom-right">
            <div class="info-item">ww/wc: {{ getViewportInfo(currentImageIndex).windowWidth }}/{{ getViewportInfo(currentImageIndex).windowCenter }}</div>
            <div class="info-item"> Zoom: {{ getViewportInfo(currentImageIndex).zoomLevel }}x</div>
          </div>
        </div>

        <!-- 修改多屏视图部分 -->
        <template v-else>
          <div
              v-for="(viewport, index) in splitViewports"
              :key="viewport.id"
              :ref="`dicomViewer${index > 0 ? index : ''}`"
              class="dicom-canvas"
              :class="getSplitItemClass()"
              @wheel="handleWheel"
          >
            <!-- 每个视图的图像信息 -->
            <div v-if="dicomImages[viewport.imageIndex]" class="image-info top-left">
              <div class="info-item">姓名: {{ patientInfo.name }}</div>
              <div class="info-item">性别: {{ patientInfo.gender }}</div>
              <div class="info-item">年龄: {{ patientInfo.age }}</div>
              <div class="info-item">检查日期: {{ patientInfo.studyDate }}</div>
            </div>
            <div class="image-info top-right">
            <div class="info-item">{{ dicomImages[viewport.imageIndex].name }}</div>
            <div class="info-item">{{viewport.imageIndex+1}}/{{dicomImages.length}}</div>
          </div>
            <div class="image-info bottom-left">
              {{ getViewportInfo(index).imageWidth }}x{{ getViewportInfo(index).imageHeight }}
            </div>
            <div class="image-info bottom-right">
              <div class="info-item">ww/wc: {{ getViewportInfo(index).windowWidth }}/{{ getViewportInfo(index).windowCenter }}</div>
              <div class="info-item"> Zoom: {{ getViewportInfo(index).zoomLevel }}x</div>
            </div>
          </div>
        </template>

        <div v-if="loadingImage" class="loading-overlay">
          <div class="spinner"></div>
          <p>正在加载影像...</p>
        </div>
        <div v-else-if="!currentImage && currentSplitCount === 1" class="no-image-state">
          <div class="placeholder-icon">🖼️</div>
          <p>请选择一个影像文件</p>
        </div>
      </div>
    </div>



    <!-- 悬浮控制面板 (移到最底部) -->
    <div class="floating-controls bottom-controls">
      <div class="control-buttons">
        <button @click="resetView" :disabled="!currentImage" class="control-btn">
          <span class="btn-icon">🔄</span>
        </button>
        <button @click="toggleInvert" :disabled="!currentImage" class="control-btn">
          <span class="btn-icon">🌓</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'wwwc' }]"
            @click="setTool('wwwc')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">🎚️</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'pan' }]"
            @click="setTool('pan')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">✋</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'zoom' }]"
            @click="setTool('zoom')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">🔎</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'length' }]"
            @click="setTool('length')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">📏</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'angle' }]"
            @click="setTool('angle')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">📐</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'ellipticalRoi' }]"
            @click="setTool('ellipticalRoi')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">⭕</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'rectangleRoi' }]"
            @click="setTool('rectangleRoi')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">⬜</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'freehandRoi' }]"
            @click="setTool('freehandRoi')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">✏️</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'bidirectional' }]"
            @click="setTool('bidirectional')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">⟷</span>
        </button>
        <button
            :class="['tool-btn', { active: activeTool === 'probe' }]"
            @click="setTool('probe')"
            :disabled="!currentImage"
        >
          <span class="tool-icon">📍</span>
        </button>
        <!-- 分屏布局按钮 -->
        <el-popover
            placement="top"
            width="30"
            :popper-class="'split-el-popover'"
            trigger="click">
          <div
              v-for="count in splitLayouts"
              :key="count"
              :class="['split-menu-item', { active: currentSplitCount === count }]"
              @click="changeSplitLayout(count)"
          >
            {{ count }}
          </div>
          <button
              slot="reference"
              class="split-dropdown-btn"
              :disabled="!currentImage"
              @click="toggleSplitDropdown"
          >
            <span class="tool-icon">{{ currentSplitCount||'◫' }}</span>
          </button>
        </el-popover>
        <!-- 自动播放按钮 -->
        <button
            :class="['tool-btn', { active: isAutoPlay }]"
            @click="toggleAutoPlay"
            :disabled="!currentImage"
        >
          <span class="tool-icon">{{ isAutoPlay ? '⏸️' : '▶️' }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import cornerstone from 'cornerstone-core';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
import dicomParser from 'dicom-parser';
import cornerstoneMath from 'cornerstone-math';
import cornerstoneTools from 'cornerstone-tools';
import Hammer from 'hammerjs';

export default {
  name: 'ServerDicomViewer',
  data() {
    return {
      // 影像列表数据（默认服务器数据）
      dicomImages: [
        {
          id: 'image_1',
          name: 'image-000001.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/1.3.46.670589.33.1.63852164142100533600001.5644966583038020853.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/4a90e2/ffffff?text=1'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        },
        {
          id: 'image_2',
          name: 'image-000002.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000002.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/7ed321/ffffff?text=2'
        },
        {
          id: 'image_3',
          name: 'image-000003.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000003.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/f5a623/ffffff?text=3'
        },
        {
          id: 'image_4',
          name: 'image-000004.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000004.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/d0021b/ffffff?text=4'
        },
        {
          id: 'image_5',
          name: 'image-000005.dcm',
          url: 'wadouri:http://localhost:8092/series-000001/image-000005.dcm',
          thumbnail: 'https://via.placeholder.com/50x50/9013fe/ffffff?text=5'
        }
      ],
      currentImageIndex: 0,

      // 影像显示参数
      activeTool: '',
      // 添加分屏和自动播放相关数据
      splitLayouts: [1, 2, 4, 6, 9], // 支持的分屏数量
      currentSplitCount: 1, // 当前分屏数量
      splitViewports: [], // 分屏视口数组
      isAutoPlay: false,
      autoPlayInterval: null,
      autoPlaySpeed: 1000, // 毫秒

      // 加载状态
      loadingImage: false,

      // cornerstone 相关对象
      element: null,
      cTools:null,

      // 患者信息数据
      patientInfo: {
        name: '张三',
        gender: '男',
        age: '45岁',
        studyDate: '2023-10-15'
      },

      // 分屏图像信息存储
      splitImageInfo: {},
      showSplitDropdown: false, // 控制分屏下拉菜单显示
      // 将全局参数改为对象数组，每个分屏视图独立管理
      viewportsInfo: [
        {
          imageWidth: 512,
          imageHeight: 512,
          windowWidth: 400,
          windowCenter: 40,
          zoomLevel: 1.0,
          isInverted: false
        }
      ],
    }
  },

  computed: {
    currentImage() {
      return this.dicomImages[this.currentImageIndex] || null;
    },
    // 获取当前活动视图的信息
    currentViewportInfo() {
      if (this.currentSplitCount === 1) {
        return this.viewportsInfo[0];
      } else {
        // 多屏模式下，可以返回主视图或根据需要调整
        return this.viewportsInfo[0];
      }
    }
  },

  mounted() {
    this.initViewer();
    // 自动加载第一张影像
    if (this.dicomImages.length > 0) {
      this.loadImage(0);
    }
    // 初始化工具
    this.initTools();
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    // 清理单屏视图事件监听器
    if (this.element) {
      cornerstone.disable(this.element);
    }

    // 清理分屏视图事件监听器
    if (this.currentSplitCount > 1) {
      for (let i = 0; i < this.splitViewports.length; i++) {
        const elementRef = `dicomViewer${i > 0 ? i : ''}`;
        const elementArray = this.$refs[elementRef];
        if (elementArray && elementArray.length > 0) {
          const element = elementArray[0];
          this.removeViewportEventListeners(element, i);
        }
      }
    }

    // 清理自动播放定时器
    if (this.autoPlayInterval) {
      clearInterval(this.autoPlayInterval);
    }
    document.removeEventListener('click', this.handleClickOutside);
  },

  methods: {
    // 添加图像渲染完成事件监听器
    addViewportEventListeners(element, viewportIndex) {
      if (!element) return;

      // 监听图像渲染完成事件，用于更新窗宽窗位值
      const handleImageRendered = (event) => {
        try {
          const viewport = cornerstone.getViewport(event.target);
          if (viewport && viewport.voi) {
            this.updateViewportInfo(viewportIndex, {
              windowWidth: Math.round(viewport.voi.windowWidth),
              windowCenter: Math.round(viewport.voi.windowCenter),
              zoomLevel: parseFloat(viewport.scale.toFixed(2))
            });
          }
        } catch (error) {
          console.warn(`更新视图 ${viewportIndex} 信息失败:`, error);
        }
      };

      element.addEventListener('cornerstoneimagerendered', handleImageRendered);

      // 保存监听器引用以便后续清理
      if (!this.viewportEventListeners) {
        this.viewportEventListeners = {};
      }
      this.viewportEventListeners[`${viewportIndex}`] = handleImageRendered;
    },

    // 移除事件监听器
    removeViewportEventListeners(element, viewportIndex) {
      if (!element || !this.viewportEventListeners) return;

      const listener = this.viewportEventListeners[`${viewportIndex}`];
      if (listener) {
        element.removeEventListener('cornerstoneimagerendered', listener);
        delete this.viewportEventListeners[`${viewportIndex}`];
      }
  },
    // 获取指定视图的信息
    // 修改 getViewportInfo 方法以从实际视图中获取当前的窗宽窗位值
    getViewportInfo(viewportIndex) {
      // 确保视图信息对象存在
      if (!this.viewportsInfo[viewportIndex]) {
        const defaultInfo = {
          imageWidth: 512,
          imageHeight: 512,
          windowWidth: 400,
          windowCenter: 40,
          zoomLevel: 1.0,
          isInverted: false
        };
        this.$set(this.viewportsInfo, viewportIndex, defaultInfo);
      }

      // 尝试从实际的 cornerstone 视图中获取当前的窗宽窗位值
      try {
        if (this.currentSplitCount === 1 && viewportIndex === 0) {
          // 单屏模式
          if (this.element) {
            const viewport = cornerstone.getViewport(this.element);
            if (viewport && viewport.voi) {
              this.viewportsInfo[viewportIndex].windowWidth = Math.round(viewport.voi.windowWidth);
              this.viewportsInfo[viewportIndex].windowCenter = Math.round(viewport.voi.windowCenter);
            }
          }
        } else if (this.currentSplitCount > 1) {
          // 多屏模式
          const elementRef = `dicomViewer${viewportIndex > 0 ? viewportIndex : ''}`;
          const elementArray = this.$refs[elementRef];
          if (elementArray && elementArray.length > 0) {
            const element = elementArray[0];
            const viewport = cornerstone.getViewport(element);
            if (viewport && viewport.voi) {
              this.viewportsInfo[viewportIndex].windowWidth = Math.round(viewport.voi.windowWidth);
              this.viewportsInfo[viewportIndex].windowCenter = Math.round(viewport.voi.windowCenter);
            }
          }
        }
      } catch (error) {
        console.warn(`获取视图 ${viewportIndex} 的窗宽窗位值失败:`, error);
      }

      return this.viewportsInfo[viewportIndex];
    },

    // 更新指定视图的信息
    updateViewportInfo(viewportIndex, info) {
      if (!this.viewportsInfo[viewportIndex]) {
        this.$set(this.viewportsInfo, viewportIndex, {
          imageWidth: 512,
          imageHeight: 512,
          windowWidth: 400,
          windowCenter: 40,
          zoomLevel: 1.0,
          isInverted: false
        });
      }

      Object.assign(this.viewportsInfo[viewportIndex], info);
    },
    // 切换分屏下拉菜单显示状态
    toggleSplitDropdown() {
      if (!this.currentImage) return;
      this.showSplitDropdown = !this.showSplitDropdown;
    },

    // 点击其他地方关闭下拉菜单
    handleClickOutside(event) {
      const dropdown = document.querySelector('.split-dropdown');
      if (dropdown && !dropdown.contains(event.target)) {
        this.showSplitDropdown = false;
      }
    },
    // 从DICOM图像中提取患者信息
    extractPatientInfo(image) {
      try {
        // 如果图像对象包含DICOM元数据
        if (image.data && image.data.string) {
          // 提取患者信息（使用常见的DICOM标签）
          const name = image.data.string('x00100010') || ''; // 患者姓名
          const gender = image.data.string('x00100040') || ''; // 患者性别
          const birthDate = image.data.string('x00100030') || ''; // 出生日期
          const studyDate = image.data.string('x00080020') || ''; // 检查日期

          // 计算年龄（如果提供了出生日期）
          let age = '';
          if (birthDate) {
            age = this.calculateAge(birthDate);
          }

          return {
            name: name,
            gender: gender,
            age: age,
            studyDate: studyDate
          };
        }
      } catch (error) {
        console.warn('提取患者信息失败:', error);
      }

      // 如果无法提取信息，返回默认值
      return {
        name: '未知',
        gender: '未知',
        age: '未知',
        studyDate: '未知'
      };
    },

    // 根据出生日期计算年龄
    calculateAge(birthDate) {
      try {
        // DICOM日期格式为 YYYYMMDD
        if (birthDate && birthDate.length === 8) {
          const year = parseInt(birthDate.substring(0, 4));
          const month = parseInt(birthDate.substring(4, 6)) - 1; // JS月份从0开始
          const day = parseInt(birthDate.substring(6, 8));

          const birth = new Date(year, month, day);
          const today = new Date();
          const ageInYears = today.getFullYear() - birth.getFullYear();

          // 检查是否已过生日
          const monthDiff = today.getMonth() - birth.getMonth();
          if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
            return (ageInYears - 1) + '岁';
          }
          return ageInYears + '岁';
        }
      } catch (error) {
        console.warn('计算年龄失败:', error);
      }
      return '未知';
    },
    // 添加初始化工具方法
    initTools() {
      // 添加所有工具
      // 配置文字样式
      const textStyle = cornerstoneTools.toolColors;
      if (textStyle) {
        textStyle.setFillColor('rgba(255, 0, 0, 0.8)'); // 文字背景色
        textStyle.setToolColor('rgba(255, 0, 0, 0.8)'); // 文字背景色
      }
      cornerstoneTools.addTool(cornerstoneTools.PanTool);
      cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
      cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
      cornerstoneTools.addTool(cornerstoneTools.LengthTool);
      cornerstoneTools.addTool(cornerstoneTools.AngleTool);
      cornerstoneTools.addTool(cornerstoneTools.EllipticalRoiTool);
      cornerstoneTools.addTool(cornerstoneTools.RectangleRoiTool);
      cornerstoneTools.addTool(cornerstoneTools.FreehandRoiTool);
      cornerstoneTools.addTool(cornerstoneTools.BidirectionalTool);
      cornerstoneTools.addTool(cornerstoneTools.ProbeTool);
      cornerstoneTools.addTool(cornerstoneTools.RotateTool);
    },
    // 修改 getSplitItemClass 方法
    getSplitItemClass() {
      switch (this.currentSplitCount) {
        case 2: return 'split-item-2';
        case 4: return 'split-item-4';
        case 6: return 'split-item-6';
        case 9: return 'split-item-9';
        default: return 'split-item-1';
      }
    },
    // 在 methods 中添加
    initSplitViewports() {
      // 清除现有的分屏视口
      this.splitViewports = [];

      // 根据当前分屏数量创建视口
      for (let i = 0; i < this.currentSplitCount; i++) {
        if (i < this.dicomImages.length) {
          this.splitViewports.push({
            id: `viewport-${i}`,
            imageIndex: i,
            elementRef: `dicomViewer${i > 0 ? i : ''}`
          });
        }
      }

      // 等待DOM更新后初始化分屏视图
      this.$nextTick(() => {
        this.initAllSplitViewports();
      });

      console.log(`初始化${this.currentSplitCount}分屏布局`);
    },

// 初始化所有分屏视图
    initAllSplitViewports() {
      for (let i = 0; i < this.splitViewports.length; i++) {
        this.initSplitViewport(i);
      }
    },
    // 初始化单个分屏视图

    initSplitViewport(index) {
      const elementRef = `dicomViewer${index > 0 ? index : ''}`;
      const element = this.$refs[elementRef];

      if (element && element.length > 0) {
        const el = element[0] || element;
        try {
          // 启用 cornerstone
          cornerstone.enable(el);
          // 添加事件监听器
          this.addViewportEventListeners(el, index);
          // 加载并显示图像
          if (index < this.dicomImages.length) {
            this.loadSplitImage(index);
          }

          // 为分屏视图设置当前工具
          if (this.activeTool) {
            this.setToolForElement(el, this.activeTool);
          }
        } catch (error) {
          console.error(`初始化分屏视图 ${index} 失败:`, error);
        }
      }
    },

// 为特定元素设置工具
    setToolForElement(element, toolName) {
      const toolMap = {
        'pan': 'Pan',
        'zoom': 'Zoom',
        'wwwc': 'Wwwc',
        'length': 'Length',
        'angle': 'Angle',
        'ellipticalRoi': 'EllipticalRoi',
        'rotate': 'Rotate',
        'rectangleRoi': 'RectangleRoi',
        'freehandRoi': 'FreehandRoi',
        'bidirectional': 'Bidirectional',
        'probe': 'Probe'
      };

      if (toolMap[toolName]) {
        try {
          cornerstoneTools.setToolActiveForElement(element, toolMap[toolName], { mouseButtonMask: 1 });
        } catch (error) {
          console.error(`为元素设置工具失败:`, error);
        }
      }
    },

// 加载分屏图像
    async loadSplitImage(viewportIndex) {
      const imageIndex = viewportIndex;
      const image = this.dicomImages[imageIndex];

      if (!image) return;

      try {
        const elementRef = `dicomViewer${viewportIndex > 0 ? viewportIndex : ''}`;
        const element = this.$refs[elementRef];

        if (element && element.length > 0) {
          const el = element[0] || element;

          // 使用 cornerstone.js 加载影像
          const loadedImage = await cornerstone.loadImage(image.url);
          // 更新该视图的影像尺寸信息
          this.updateViewportInfo(viewportIndex, {
            imageWidth: loadedImage.width,
            imageHeight: loadedImage.height
          });
          // 显示影像
          cornerstone.displayImage(el, loadedImage);
          // 获取并设置当前视图的窗宽窗位值
          const viewport = cornerstone.getViewport(el);
          if (viewport && viewport.voi) {
            this.updateViewportInfo(viewportIndex, {
              imageWidth: loadedImage.width,
              imageHeight: loadedImage.height,
              windowWidth: Math.round(viewport.voi.windowWidth),
              windowCenter: Math.round(viewport.voi.windowCenter)
            });
          } else {
            // 如果无法获取视图信息，使用默认值
            this.updateViewportInfo(viewportIndex, {
              imageWidth: loadedImage.width,
              imageHeight: loadedImage.height
            });
          }
          // 对于分屏，我们可以选择使用主屏的患者信息或为每个分屏单独提取
          // 这里我们为第一个加载的图像设置患者信息
          if (viewportIndex === 0) {
            const patientInfo = this.extractPatientInfo(loadedImage);
            this.patientInfo = patientInfo;
          }

          console.log(`成功加载分屏图像 ${viewportIndex}: ${image.name}`);
        }
      } catch (error) {
        console.error(`加载分屏图像 ${viewportIndex} 失败:`, error);
      }
    },
    // 初始化 cornerstone.js
    initViewer() {
      this.element = this.$refs.dicomViewer;

      if (!this.element) {
        console.error('DICOM查看器元素未找到');
        return;
      }

      try {
        // 配置WADO Image Loader以处理CORS
        cornerstoneWADOImageLoader.configure({
          beforeSend: function(xhr) {
            // 添加CORS相关头部
            xhr.setRequestHeader('Accept', 'application/dicom');
            xhr.withCredentials = true; // 允许跨域请求
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
          },
          useWebWorkers: true,
          decodeConfig: {
            usePDFJS: false,
            attemptToUseSharedArrayBuffer: true
          }
        });
        // 设置外部依赖
        if (cornerstoneWADOImageLoader && cornerstone && dicomParser) {
          cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
          cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
        }
        // 3. 设置 cornerstoneTools 的外部依赖
        cornerstoneTools.external.cornerstone = cornerstone;
        cornerstoneTools.external.Hammer = Hammer;
        cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
        cornerstoneTools.init({
          mouseEnabled: true,
          touchEnabled: true,
          globalToolSyncEnabled: true,
          showSVGCursors: true,
        });

        // 添加工具
        this.initTools()
        // 启用 cornerstone
        cornerstone.enable(this.element);
        console.log('cornerstone.js 初始化完成');
      } catch (error) {
        console.error('初始化 cornerstone.js 失败:', error);
      }
    },

    // 加载并渲染DICOM影像
    async loadImage(index,flage) {
      const image = this.dicomImages[index];
      if (!image) return;

      this.currentImageIndex = index;
      if(!flage){
        this.loadingImage = true;
      }
      try {
        // 使用 cornerstone.js 加载影像
        const loadedImage = await cornerstone.loadImage(image.url);
        // 更新影像尺寸信息到第一个视图
        this.updateViewportInfo(0, {
          imageWidth: loadedImage.width,
          imageHeight: loadedImage.height
        });
        // 更新影像尺寸信息
        this.imageWidth = loadedImage.width;
        this.imageHeight = loadedImage.height;

        // 从加载的图像中提取患者信息
        const patientInfo = this.extractPatientInfo(loadedImage);
        this.patientInfo = patientInfo;
        this.addViewportEventListeners(this.element, index);
        // 渲染影像
        this.renderImage(loadedImage);
        console.log(`成功加载影像: ${image.name}`);

      } catch (error) {
        this.patientInfo = {
          name: '加载失败',
          gender: '未知',
          age: '未知',
          studyDate: '未知'
        };
        console.error('加载DICOM影像失败:', error);
      } finally {
        this.loadingImage = false;
      }
    },

    // 渲染影像到画布
    renderImage(loadedImage) {
      if (!this.element) {
        console.error('DICOM画布元素未初始化');
        return;
      }

      try {
        // 显示影像
        cornerstone.displayImage(this.element, loadedImage);

        // 如果需要反转颜色
        if (this.isInverted) {
          this.applyInvert();
        }

        // 更新缩放级别
        const viewport = cornerstone.getViewport(this.element);
        if (viewport) {
          this.updateViewportInfo(0, {
            zoomLevel: parseFloat(viewport.scale.toFixed(2)),
            windowWidth: viewport.voi ? Math.round(viewport.voi.windowWidth) : 400,
            windowCenter: viewport.voi ? Math.round(viewport.voi.windowCenter) : 40
          });
        }
        this.zoomLevel = viewport.scale.toFixed(2);

        console.log('影像渲染完成');
      } catch (error) {
        console.error('影像渲染失败:', error);
      }
    },
    // 停用所有工具的通用方法
    deactivateAllTools() {
      try {
        cornerstoneTools.setToolPassive('Pan');
        cornerstoneTools.setToolPassive('Zoom');
        cornerstoneTools.setToolPassive('Wwwc');
        cornerstoneTools.setToolPassive('Length');
        cornerstoneTools.setToolPassive('Angle');
        cornerstoneTools.setToolPassive('EllipticalRoi');
        cornerstoneTools.setToolPassive('Rotate');
        cornerstoneTools.setToolPassive('RectangleRoi');
        cornerstoneTools.setToolPassive('FreehandRoi');
        cornerstoneTools.setToolPassive('Bidirectional');
        cornerstoneTools.setToolPassive('Probe');
      } catch (error) {
        console.error('停用工具失败:', error);
      }
    },
    // 重置视图
    resetView() {
      if (!this.currentImage) return;
        this.deactivateAllTools();
        this.activeTool='';
      try {
        // 重置窗宽窗位
        this.windowWidth = 400;
        this.windowCenter = 40;

        // 重置反转状态
        this.isInverted = false;

        if (this.currentSplitCount === 1) {
          // 单屏模式
          if (this.element) {
            cornerstone.reset(this.element);
            // 重置视图信息
            this.updateViewportInfo(0, {
              windowWidth: 400,
              windowCenter: 40,
              zoomLevel: 1.0,
              isInverted: false
            });
          }
        } else {
          // 多屏模式 - 为每个分屏重置视图
          for (let i = 0; i < this.splitViewports.length; i++) {
            const elementRef = `dicomViewer${i > 0 ? i : ''}`;
            const element = this.$refs[elementRef];

            if (element && element.length > 0) {
              const el = element[0] || element;
              try {
                cornerstone.reset(el);
                // 重置视图信息
                this.updateViewportInfo(i, {
                  windowWidth: 400,
                  windowCenter: 40,
                  zoomLevel: 1.0,
                  isInverted: false
                });
              } catch (error) {
                console.error(`重置分屏视图 ${i} 失败:`, error);
              }
            }
          }
        }

        this.zoomLevel = 1.0;
      } catch (error) {
        console.error('重置视图失败:', error);
      }
    },

    // 反转颜色
  toggleInvert() {
    if (!this.currentImage) return;
    this.deactivateAllTools();
    this.activeTool='';
    try {
      this.isInverted = !this.isInverted;

      if (this.currentSplitCount === 1) {
        // 单屏模式
        const viewportInfo = this.getViewportInfo(0);
        const newInverted = !viewportInfo.isInverted;
        this.updateViewportInfo(0, { isInverted: newInverted });
        // 单屏模式
        if (this.element) {
          this.applyInvertToElement(this.element, newInverted);
        }
      } else {
        // 多屏模式 - 为每个分屏应用反转
        for (let i = 0; i < this.splitViewports.length; i++) {
          const elementRef = `dicomViewer${i > 0 ? i : ''}`;
          const element = this.$refs[elementRef];
          const viewportInfo = this.getViewportInfo(i);
          const newInverted = !viewportInfo.isInverted;
          this.updateViewportInfo(i, { isInverted: newInverted });

          if (element && element.length > 0) {
            const el = element[0] || element;
            try {
              this.applyInvertToElement(el, newInverted);
            } catch (error) {
              console.error(`为分屏视图 ${i} 应用反转失败:`, error);
            }
          }
        }
      }
    } catch (error) {
      console.error('反转颜色失败:', error);
    }
  },

// 为特定元素应用颜色反转
    applyInvertToElement(element, isInverted) {
      try {
        const viewport = cornerstone.getViewport(element);
        viewport.invert = isInverted;
        cornerstone.setViewport(element, viewport);
      } catch (error) {
        console.error('应用颜色反转失败:', error);
      }
    },
    // 应用窗宽窗位设置
  applyWindowing() {
    if (!this.currentImage) return;

    if (this.currentSplitCount === 1) {
      // 单屏模式
      if (this.element) {
        this.applyWindowingToElement(this.element);
      }
    } else {
      // 多屏模式 - 为每个分屏应用窗宽窗位
      for (let i = 0; i < this.splitViewports.length; i++) {
        const elementRef = `dicomViewer${i > 0 ? i : ''}`;
        const element = this.$refs[elementRef];

        if (element && element.length > 0) {
          const el = element[0] || element;
          try {
            this.applyWindowingToElement(el);
          } catch (error) {
            console.error(`为分屏视图 ${i} 应用窗宽窗位失败:`, error);
          }
        }
      }
    }
  },

// 为特定元素应用窗宽窗位设置
  applyWindowingToElement(element) {
    try {
      const viewport = cornerstone.getViewport(element);
      viewport.voi = {
        windowWidth: parseInt(this.windowWidth),
        windowCenter: parseInt(this.windowCenter)
      };
      cornerstone.setViewport(element, viewport);
    } catch (error) {
      console.error('应用窗宽窗位设置失败:', error);
    }
  },

    // 应用颜色反转
    applyInvert() {
      if (!this.element) return;

      try {
        const viewport = cornerstone.getViewport(this.element);
        viewport.invert = this.isInverted;
        cornerstone.setViewport(this.element, viewport);
      } catch (error) {
        console.error('应用颜色反转失败:', error);
      }
    },

    // 设置当前工具
    setTool(toolName) {
      if (!this.currentImage || !this.element) {
        console.log('无法设置工具: 缺少图像或元素');
        return;
      }
      cornerstone.resize(this.element, true);
      // 检查工具是否存在
      const availableTools = ['pan', 'zoom', 'wwwc', 'length', 'angle', 'ellipticalRoi',
        'rotate', 'rectangleRoi', 'freehandRoi', 'bidirectional', 'probe'];
      if (!availableTools.includes(toolName)) {
        console.log('不支持的工具:', toolName);
        return;
      }

      try {
        this.activeTool = toolName;
        console.log('设置工具:', toolName);
        // 停用所有工具
        this.deactivateAllTools();
        const toolMap = {
          'pan': 'Pan',
          'zoom': 'Zoom',
          'wwwc': 'Wwwc',
          'length': 'Length',
          'angle': 'Angle',
          'ellipticalRoi': 'EllipticalRoi',
          'rotate': 'Rotate',
          'rectangleRoi': 'RectangleRoi',
          'freehandRoi': 'FreehandRoi',
          'bidirectional': 'Bidirectional',
          'probe': 'Probe'
        };

        if (toolMap[toolName]) {
          cornerstoneTools.setToolActive(toolMap[toolName], { mouseButtonMask: 1 });
        }

        console.log('工具设置完成:', toolName);
      } catch (error) {
        console.error('设置工具失败:', error);
      }
    },

    // 鼠标滚轮事件处理（翻页）
    handleWheel(event) {
      event.preventDefault();

      if (this.dicomImages.length <= 1) return;

      // 在分屏模式下，需要确定鼠标在哪个视图上
      if (this.currentSplitCount === 1) {
        // 单屏模式，直接处理
        if (event.deltaY < 0) {
          // 向上滚动，显示下一张影像
          this.nextImage();
        } else {
          // 向下滚动，显示上一张影像
          this.previousImage();
        }
      } else {
        // 多屏模式，需要确定是哪个视图触发的事件
        const targetElement = event.target;
        let targetViewportIndex = 0;

        // 查找触发事件的元素对应的视图索引
        for (let i = 0; i < this.splitViewports.length; i++) {
          const elementRef = `dicomViewer${i > 0 ? i : ''}`;
          const elementArray = this.$refs[elementRef];
          if (elementArray && elementArray.length > 0) {
            const element = elementArray[0];
            if (element === targetElement || element.contains(targetElement)) {
              targetViewportIndex = i;
              break;
            }
          }
        }

        // 对应视图进行翻页
        if (event.deltaY < 0) {
          // 向上滚动，显示下一张影像
          this.nextImageForViewport(targetViewportIndex);
        } else {
          // 向下滚动，显示上一张影像
          this.previousImageForViewport(targetViewportIndex);
        }
      }
    },

// 为特定视图添加下一张影像方法
    nextImageForViewport(viewportIndex) {
      if (viewportIndex < this.splitViewports.length) {
        const currentImageIndex = this.splitViewports[viewportIndex].imageIndex;
        if (currentImageIndex < this.dicomImages.length - 1) {
          // 更新该视图的图像索引
          this.splitViewports[viewportIndex].imageIndex = currentImageIndex + 1;
          // 重新加载该视图的图像
          this.loadSplitImageForViewport(viewportIndex, currentImageIndex + 1);
        }
      }
    },

// 为特定视图添加上一张影像方法
    previousImageForViewport(viewportIndex) {
      if (viewportIndex < this.splitViewports.length) {
        const currentImageIndex = this.splitViewports[viewportIndex].imageIndex;
        if (currentImageIndex > 0) {
          // 更新该视图的图像索引
          this.splitViewports[viewportIndex].imageIndex = currentImageIndex - 1;
          // 重新加载该视图的图像
          this.loadSplitImageForViewport(viewportIndex, currentImageIndex - 1);
        }
      }
    },

// 为特定视图加载图像
    async loadSplitImageForViewport(viewportIndex, imageIndex) {
      const image = this.dicomImages[imageIndex];
      if (!image) return;

      try {
        const elementRef = `dicomViewer${viewportIndex > 0 ? viewportIndex : ''}`;
        const element = this.$refs[elementRef];

        if (element && element.length > 0) {
          const el = element[0] || element;

          // 使用 cornerstone.js 加载影像
          const loadedImage = await cornerstone.loadImage(image.url);

          // 显示影像
          cornerstone.displayImage(el, loadedImage);

          // 更新视图信息
          const viewport = cornerstone.getViewport(el);
          if (viewport && viewport.voi) {
            this.updateViewportInfo(viewportIndex, {
              imageWidth: loadedImage.width,
              imageHeight: loadedImage.height,
              windowWidth: Math.round(viewport.voi.windowWidth),
              windowCenter: Math.round(viewport.voi.windowCenter)
            });
          } else {
            this.updateViewportInfo(viewportIndex, {
              imageWidth: loadedImage.width,
              imageHeight: loadedImage.height
            });
          }

          console.log(`成功为视图 ${viewportIndex} 加载图像: ${image.name}`);
        }
      } catch (error) {
        console.error(`为视图 ${viewportIndex} 加载图像失败:`, error);
      }
    },

    // 下一张影像
    nextImage() {
      if (this.currentImageIndex < this.dicomImages.length - 1) {
        this.loadImage(this.currentImageIndex + 1,true);
      }
    },

    // 上一张影像
    previousImage() {
      if (this.currentImageIndex > 0) {
        this.loadImage(this.currentImageIndex - 1,true);
      }
    },

    // 通过进度条改变影像
    changeImageByProgress(event) {
      const newIndex = parseInt(event.target.value) - 1;
      if (newIndex >= 0 && newIndex < this.dicomImages.length) {
        this.loadImage(newIndex);
      }
    },

    // 切换分屏布局
    // 修改 changeSplitLayout 方法
    changeSplitLayout(count) {
      this.deactivateAllTools();
      this.activeTool='';
      this.isAutoPlay = false;
      this.stopAutoPlay();
      if (this.splitLayouts.includes(count)) {
        const oldSplitCount = this.currentSplitCount;
        this.currentSplitCount = count;

        this.$nextTick(() => {
          if (count === 1) {
            // 切换到单屏时，重新初始化单屏视图
            this.initSingleViewport();
          } else {
            // 切换到多屏时，初始化多屏视图
            this.initSplitViewports();
          }
        });
      }
    },

// 添加初始化单屏视图的方法
    initSingleViewport() {
      this.element = this.$refs.dicomViewer;
      // 清除现有的分屏视口
      this.splitViewports = [];
      // 重新启用单屏视图
      this.$nextTick(() => {
        if (this.element) {
          try {
            // 重新启用 cornerstone
            cornerstone.enable(this.element);
            // 重新加载当前图像
            console.log(1111)
            if (this.currentImage) {
              this.loadImage(this.currentImageIndex);
            }
          } catch (error) {
            console.error('重新初始化单屏视图失败:', error);
          }
        }
      });
    },
    // 获取分屏容器的CSS类
    getSplitContainerClass() {
      // 单屏时不需要特殊类
      if (this.currentSplitCount === 1) {
        return '';
      }
      return `split-${this.currentSplitCount}`;
    },


    // 获取分屏底部信息栏的CSS类
    getSplitBottomInfoClass(index) {
      return `split-bottom-info-${index}`;
    },

    // 获取指定图像的宽度
    getImageWidth(imageIndex) {
      // 这里应该从存储的图像信息中获取，暂时返回默认值
      return this.imageWidth;
    },

    // 获取指定图像的高度
    getImageHeight(imageIndex) {
      // 这里应该从存储的图像信息中获取，暂时返回默认值
      return this.imageHeight;
    },

    // 获取窗宽
    getWindowWidth() {
      return this.windowWidth;
    },

    // 获取窗位
    getWindowCenter() {
      return this.windowCenter;
    },

    // 切换自动播放
    toggleAutoPlay() {
      this.deactivateAllTools();
      this.activeTool='';
      if(this.currentSplitCount!=1){
        this.isAutoPlay = false;
        this.stopAutoPlay();
        return;
      }
      this.isAutoPlay = !this.isAutoPlay;

      if (this.isAutoPlay) {
        // 开始自动播放
        this.startAutoPlay();
      } else {
        // 停止自动播放
        this.stopAutoPlay();
      }
    },

    // 开始自动播放
    startAutoPlay() {
      if (this.autoPlayInterval) {
        clearInterval(this.autoPlayInterval);
      }

      this.autoPlayInterval = setInterval(() => {
        this.nextImage();
      }, this.autoPlaySpeed);
    },

    // 停止自动播放
    stopAutoPlay() {
      if (this.autoPlayInterval) {
        clearInterval(this.autoPlayInterval);
        this.autoPlayInterval = null;
      }
    },

    // 调整自动播放速度
    setAutoPlaySpeed(speed) {
      this.autoPlaySpeed = speed;
      if (this.isAutoPlay) {
        this.stopAutoPlay();
        this.startAutoPlay();
      }
    }
  }
}
</script>

<style scoped>
.dicom-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #000;
  font-family: Arial, sans-serif;
  position: relative;
  color: #ffff00;
}

.top-info-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 15px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.bottom-info-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 15px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.left-info, .right-info {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.right-info {
  text-align: right;
}

.info-item {
  white-space: nowrap;
}

.patient-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.left-info {
  flex: 1;
}

.right-info {
  flex: 1;
  text-align: right;
}

.patient-info {
  display: flex;
  justify-content: flex-end;
}

.main-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  height: calc(100% - 55px);
}


.image-display {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.dicom-canvas {
  width: 100%;
  height: calc(100% - 55px);
  cursor: crosshair;
  touch-action: none; /* 防止触摸事件干扰 */
  user-select: none; /* 防止文本选择干扰 */
  position: relative;
  display: block;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffff00;
  z-index: 10;
  font-size: 12px;
  line-height: 16px;
}

.loading-overlay .spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #333;
  border-top: 3px solid #ffff00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.no-image-state {
  text-align: center;
  color: #ffff00;
  font-size: 12px;
  line-height: 16px;
}

.placeholder-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 悬浮控制面板 (放在底部) */
.floating-controls.bottom-controls {
  position: absolute;
  left: 50%;
  bottom: 0px; /* 调整位置避免与底部信息栏重叠 */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 5px;
  z-index: 90;
  max-width: 90vw;
}

.control-buttons {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 5px;
}

.control-btn, .tool-btn {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 6px 2px;
  background-color: rgba(100, 100, 100, 0.5);
  border: 1px solid #666;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 16px;
  color: #ffff00;
  cursor: pointer;
}

.control-btn:disabled, .tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon, .tool-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

.tool-btn.active {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

.bottom-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 100;
}

.center-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 20px;
  box-sizing: border-box;
}

.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.progress-text {
  font-size: 12px;
  line-height: 16px;
}

.image-progress {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: #333;
  border-radius: 2px;
  outline: none;
}

.image-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffff00;
  cursor: pointer;
}

.left-info, .right-info {
  min-width: 70px;
}

/* 分屏布局样式 */
.split-1 .split-item-1 {
  width: 100%;
  height: calc(100% - 55px);
}

/* 调整分屏布局为先上下后左右 */
.split-2 {
  display: flex;
  flex-direction: column;
}

.split-2 .split-item-2 {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #333;
}

.split-2 .split-item-2:last-child {
  border-bottom: none;
}

.split-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: calc(100% - 55px);
}

.split-4 .split-item-4 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-4 .split-item-4:nth-child(2n) {
  border-right: none;
}

.split-4 .split-item-4:nth-child(n+3) {
  border-bottom: none;
}

.split-6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: calc(100% - 55px);
}

.split-6 .split-item-6 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-6 .split-item-6:nth-child(3n) {
  border-right: none;
}

.split-6 .split-item-6:nth-child(n+4) {
  border-bottom: none;
}

.split-9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  height: calc(100% - 55px);
}

.split-9 .split-item-9 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-9 .split-item-9:nth-child(3n) {
  border-right: none;
}

.split-9 .split-item-9:nth-child(n+7) {
  border-bottom: none;
}

/* 图像信息显示样式 */
.image-info {
  position: absolute;
  color: #ffff00;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 10;
}

.top-left {
  top: 5px;
  left: 5px;
}

.top-right {
  top: 5px;
  right: 5px;
  text-align: right;
}

.bottom-left {
  bottom: 5px;
  left: 5px;
}

.bottom-right {
  bottom: 5px;
  right: 5px;
  text-align: right;
}

/* 分屏按钮样式 */
.split-layout-buttons {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.split-label {
  font-size: 12px;
  margin-right: 5px;
  color: #ffff00;
}

.split-btn {
  min-width: 25px;
  padding: 4px 2px;
  margin: 0 2px;
  background-color: rgba(100, 100, 100, 0.5);
  border: 1px solid #666;
  border-radius: 10px;
  font-size: 12px;
  color: #ffff00;
  cursor: pointer;
}

.split-btn.active {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

.split-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 确保分屏时canvas正确显示 */
.dicom-canvas {
  position: relative;
  overflow: hidden;
}

/* 分屏模式下的底部信息栏样式 */
.bottom-info-bar.split-mode {
  width: 50%;
  bottom: 50px;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 12px;
}

.bottom-info-bar.split-mode .left-info,
.bottom-info-bar.split-mode .right-info {
  min-width: 80px;
}

.bottom-info-bar.split-mode .progress-text {
  font-size: 10px;
  line-height: 12px;
}

/* 为不同的分屏位置设置底部信息栏位置 */
.split-bottom-info-0 {
  left: 0;
}

.split-bottom-info-1 {
  right: 0;
}

.split-bottom-info-2 {
  left: 0;
  bottom: 100px;
}

.split-bottom-info-3 {
  right: 0;
  bottom: 100px;
}

.split-bottom-info-4 {
  left: 0;
  bottom: 150px;
}

.split-bottom-info-5 {
  right: 0;
  bottom: 150px;
}

.split-bottom-info-6 {
  left: 0;
  bottom: 200px;
}

.split-bottom-info-7 {
  left: 33.33%;
  bottom: 200px;
}

.split-bottom-info-8 {
  right: 0;
  bottom: 200px;
}
/* 修改分屏布局样式 */
.viewer-section {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: calc(100% - 55px);
}

.image-display {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

/* 分屏布局样式 */
.split-1 .split-item-1 {
  width: 100%;
  height: 100%;
}

/* 调整分屏布局为先上下后左右 */
.split-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.split-2 .split-item-2 {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #333;
}

.split-2 .split-item-2:last-child {
  border-bottom: none;
}

.split-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.split-4 .split-item-4 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-4 .split-item-4:nth-child(2n) {
  border-right: none;
}

.split-4 .split-item-4:nth-child(n+3) {
  border-bottom: none;
}

.split-6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.split-6 .split-item-6 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-6 .split-item-6:nth-child(3n) {
  border-right: none;
}

.split-6 .split-item-6:nth-child(n+4) {
  border-bottom: none;
}

.split-9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
}

.split-9 .split-item-9 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-9 .split-item-9:nth-child(3n) {
  border-right: none;
}

.split-9 .split-item-9:nth-child(n+7) {
  border-bottom: none;
}

/* 确保分屏时canvas正确显示 */
.dicom-canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
/* 修改主内容区域样式 */

.image-display {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 分屏容器样式 */
.split-1 {
  width: 100%;
  height: 100%;
}

.split-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.split-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.split-6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.split-9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
}

/* 分屏项样式 */
.split-item-1 {
  width: 100%;
  height: 100%;
}

.split-item-2 {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #333;
}

.split-item-2:last-child {
  border-bottom: none;
}

.split-item-4 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-item-4:nth-child(2n) {
  border-right: none;
}

.split-item-4:nth-child(n+3) {
  border-bottom: none;
}

.split-item-6 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-item-6:nth-child(3n) {
  border-right: none;
}

.split-item-6:nth-child(n+4) {
  border-bottom: none;
}

.split-item-9 {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.split-item-9:nth-child(3n) {
  border-right: none;
}

.split-item-9:nth-child(n+7) {
  border-bottom: none;
}

/* 确保分屏时canvas正确显示 */
.dicom-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  position: relative;
  display: block;
  overflow: hidden;
}
/* 添加分屏下拉样式 */
.split-dropdown {
  position: relative;
  display: inline-block;
}

.split-dropdown-btn {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 6px 2px;
  background-color: rgba(100, 100, 100, 0.5);
  border: 1px solid #666;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 16px;
  color: #ffff00;
  cursor: pointer;
}

.split-dropdown-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.split-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid #666;
  border-radius: 5px;
  padding: 5px 0;
  min-width: 80px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.split-menu-item {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 30px;
  padding: 6px 2px;
  background-color: rgba(100, 100, 100, 0.5);
  border: 1px solid #666;
  border-radius: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  line-height: 16px;
  color: #ffff00;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 2px;
}

.split-menu-item:hover {
  background-color: rgba(100, 100, 100, 0.5);
}

.split-menu-item.active {
  background-color: #4a90e2;
  color: white;
}

.split-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

</style>
<style>
.split-el-popover{
  width: 180px ! important;
  display: flex;
  height: 36px;
  padding: 3px ! important;
  background-color: rgba(0, 0, 0, 1);
  border: 0px !important;
}
.cornerstone-canvas{
  width: 100%;
  height: 100%;
}
</style>
